import React from 'react';
import {connect} from 'dva/index';
import {Form, Icon, Input, message, Modal, Select} from 'antd';
import validator from '../../utils/validator'

const R = require('ramda');

const FormItem = Form.Item;
const Option = Select.Option;
export default connect(({ app }) => ({ app }))(
	Form.create({ wrappedComponentRef: true })(class ResetPassword extends React.Component {
		constructor(props) {
			super(props);
			this.state = { open: false }
		}

		handleOpen = () => {
			this.setState({ open: true });
		}

		handleCancel = () => {
			this.props.form.resetFields();
			this.setState({ open: false });
		}

		handleConfirm = () => {
			this.props.form.validateFields((errors, values) => {
				if (errors) return
				if (values.loginPwd !== values.confirmLoginPwd) message.error("两次输入的密码不一致");
				else this.props.dispatch({
						type: 'app/modifyPassword',
						payload: {
							oldPassword: values.oldPassword,
							loginPwd: values.loginPwd,
							onSuccess: this.handleCancel.bind(this)
						}
					});
				
			});
		}

		render() {
			const formItemLayout = {
				labelCol: {
					xs: { span: 24 },
					sm: { span: 6 },
				},
				wrapperCol: {
					xs: { span: 24 },
					sm: { span: 14 },
				},
			};

			const { getFieldDecorator } = this.props.form;

			return (
				<Modal visible={this.state.open} title={"修改密码"} onCancel={
					this.handleCancel.bind(this)
				} onOk={this.handleConfirm.bind(this)}>
					<Form>
						<FormItem
							{...formItemLayout}
							label="旧密码"
							hasFeedback
						>
							{getFieldDecorator('oldPassword', {
								rules: [{
									required: true, message: '请输入旧密码',
								}],
							})(
								<Input type={'password'} prefix={<Icon type="lock" style={{ fontSize: 13 }} />} />
								)}
						</FormItem>
						<FormItem
							{...formItemLayout}
							label="新密码"
							hasFeedback
						>
							{getFieldDecorator('loginPwd', {
								rules: [{
									required: true, message: '请输入新密码',
									pattern: validator.password.pattern, message: validator.password.message,
								}],
							})(
								<Input type={'password'} prefix={<Icon type="lock" style={{ fontSize: 13 }} />} />
								)}
						</FormItem>
						<FormItem
							{...formItemLayout}
							label="确认密码"
							hasFeedback
						>
							{getFieldDecorator('confirmLoginPwd', {
								rules: [{
									required: true, message: '请输入确认密码',
									pattern: validator.password.pattern, message: validator.password.message,
								}],
							})(
								<Input type={'password'} prefix={<Icon type="lock" style={{ fontSize: 13 }} />} />
								)}
						</FormItem>
					</Form>
				</Modal>
			);
		}
	})
)
